<template>
    <div class="goods">
        <div class="scroll-nav-wrapper">
            <cube-scroll-nav :side="true" :data="goods" :options="scrollOptions" v-if="goods.length">
                <template slot="bar" slot-scope="props">
                    <cube-scroll-nav-bar direction="vertical" :labels="props.labels" :txts="barTxts" :current="props.current">
                        <!-- 如果:txts里面的内容不是默认的，那么就使用插槽自己定义展示的内容 -->
                        <template slot-scope="props">
                            <div class="text">
                                <support-ico v-if="props.txt.type>=1" :size=3 :type="props.txt.type"></support-ico>
                                <span>{{props.txt.name}}</span>
                                <span class="num" v-if="props.txt.count">
                                    <bubble :num="props.txt.count"></bubble>
                                </span>
                            </div>
                        </template>
                    </cube-scroll-nav-bar>
                </template>
                <cube-scroll-nav-panel v-for="good in goods" :key="good.name" :label="good.name" :title="good.name">
                    <ul>
                        <li v-for="food in good.foods" :key="food.name" class="food-item" @click="selectFood(food)">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                                <div class="cart-control-wrapper">
                                    <cart-control :food="food" @add="onAdd"></cart-control>
                                </div>
                            </div>
                        </li>
                    </ul>
                </cube-scroll-nav-panel>
            </cube-scroll-nav>
        </div>
        <div class="shop-cart-wrapper">
            <shop-cart ref="shopcat" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shop-cart>
        </div>
    </div>
</template>
<script>
    import { getGoods } from 'model/api'
    import SupportIco from 'components/support-ico/support-icon'
    import ShopCart from 'components/shop-cart/shop-cart'
    import CartControl from 'components/cart-control/cart-control'
    import Bubble from 'components/bubble/bubble'
    export default {
        name: 'goods',
        props: {
            data: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        data() {
            return {
                goods: [],
                selectedFood: {},
                scrollOptions: {
                    click: false,
                    directionLockThreshold: 0
                }
            }
        },
        computed: {
            seller() {
                return this.data.seller
            },
            selectFoods() {
                let ret = []
                this.goods.forEach((good) => {
                    good.foods.forEach((food) => {
                        if (food.count) {
                            ret.push(food)
                        }
                    })
                })
                return ret
            },
            barTxts() {
                let ret = []
                this.goods.forEach((good) => {
                    const { type, name, foods } = good
                    let count = 0
                    foods.forEach((food) => {
                        // food默认是没有count属性的
                        count += food.count || 0
                    })
                    ret.push({
                        type,
                        name,
                        count
                    })
                })
                return ret
            }
        },
        methods: {
            // 点击进入详情页
            selectFood(food) {
                this.selectedFood = food
                // 显示详情页
                this._showFood()
                this._showShopCartSticky()
            },
            // 接收点击小球+,并拿到点击的DOM元素
            onAdd(el) {
                this.$refs.shopcat.drop(el)
            },
            async getGoods() {
                try {
                    // 防止在点击tab切换的时候返回重新请求数据(只请求一次就行)
                    if (!this.fetched) {
                        this.fetched = true
                        let res = await getGoods({
                            id: this.seller.id
                        })
                        if (res.errno === 0) {
                            this.goods = res.data
                        }
                    }
                } catch (error) {
                    
                }
            },
            _showFood() {
                this.foodComp = this.foodComp || this.$createFood({
                    $props: {
                        food: 'selectedFood'
                    },
                    $events: {
                        add: (el) => {
                            this.shopCartStickyComp.drop(el)
                        },
                        leave: () => {
                            this._hideShopCartSticky()
                        }
                    }
                })
                this.foodComp.show()
            },
            _showShopCartSticky() {
                this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({
                    $props: {
                        selectFoods: 'selectFoods',
                        deliveryPrice: this.seller.deliveryPrice,
                        minPrice: this.seller.minPrice,
                        fold: true
                    }
                })
                this.shopCartStickyComp.show()
            },
            _hideShopCartSticky() {
                this.shopCartStickyComp.hide()
            }
        },
        components: {
            SupportIco,
            ShopCart,
            CartControl,
            Bubble
        }
    }
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin';
@import '~common/stylus/variable';

.goods {
    position: relative;
    text-align: left;
    height: 100%;

    .scroll-nav-wrapper {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        bottom: 48px;
    }

    >>> .cube-scroll-nav-bar {
        width: 80px;
        white-space: normal;
        overflow: hidden;
    }

    >>> .cube-scroll-nav-bar-item {
        padding: 0 10px;
        display: flex;
        align-items: center;
        height: 56px;
        line-height: 14px;
        font-size: $fontsize-small;
        background: $color-background-ssss;

        .text {
            flex: 1;
            position: relative;
        }

        .num {
            position: absolute;
            right: -8px;
            top: -10px;
        }

        .support-ico {
            display: inline-block;
            vertical-align: top;
            margin-right: 4px;
        }
    }

    >>> .cube-scroll-nav-bar-item_active {
        background: $color-white;
        color: $color-dark-grey;
    }

    >>> .cube-scroll-nav-panel-title {
        padding-left: 14px;
        height: 26px;
        line-height: 26px;
        border-left: 2px solid $color-col-line;
        font-size: $fontsize-small;
        color: $color-grey;
        background: $color-background-ssss;
    }

    .food-item {
        display: flex;
        margin: 18px;
        padding-bottom: 18px;
        position: relative;

        &:last-child {
            border-none();
            margin-bottom: 0;
        }

        .icon {
            flex: 0 0 57px;
            margin-right: 10px;

            img {
                height: auto;
            }
        }

        .content {
            flex: 1;

            .name {
                margin: 2px 0 8px 0;
                height: 14px;
                line-height: 14px;
                font-size: $fontsize-medium;
                color: $color-dark-grey;
            }

            .desc, .extra {
                line-height: 10px;
                font-size: $fontsize-small-s;
                color: $color-light-grey;
            }

            .desc {
                line-height: 12px;
                margin-bottom: 8px;
            }

            .extra {
                .count {
                    margin-right: 12px;
                }
            }

            .price {
                font-weight: 700;
                line-height: 24px;

                .now {
                    margin-right: 8px;
                    font-size: $fontsize-medium;
                    color: $color-red;
                }

                .old {
                    text-decoration: line-through;
                    font-size: $fontsize-small-s;
                    color: $color-light-grey;
                }
            }
        }

        .cart-control-wrapper {
            position: absolute;
            right: 0;
            bottom: 12px;
        }
    }

    .shop-cart-wrapper {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        height: 48px;
    }
}
</style>
